Cascading Style Sheet Level 1 Quick Ref

FONTS _______________________________

font-family:
  [[<family-name> |
  <generic-family>],]* 
  [<family-name> | <generic-family>]

font-style:
  normal | italic | oblique

font-variant:
  normal | small-caps

font-weight:
  normal | bold | bolder | lighter |
  100 | 200 | 300 | 400 | 500 | 600 |
  700 | 800 | 900

font-size:
  <absolute-size> | <relative-size> | 
  <length> | <percentage>
font:
  [ <font-style> || <font-variant> || 
  <font-weight> ]  <font-size> 
  [ / <line-height> ] <font-family>

TEXT _______________________________

word-spacing:
  normal | <length>
letter-spacing:
  normal | <length>
text-decoration:
  none | [ underline || overline || 
  line-through || blink ]

vertical-align:
  baseline | sub | super | top |
  text-top | middle | bottom | 
  text-bottom | <percentage> 

text-transform:
  capitalize | uppercase |
  lowercase | none

text-align:
  left | right | center | justify

text-indent:
  <length> | <percentage>
line-height:
  normal | <number> |
  <length> | <percentage>

COLORS AND BACKGROUND ______________

color:
  <color>
background-color:
	<color> | transparent

background-image:
  <url> | none

background-repeat:
  repeat | repeat-x | repeat-y |
  no-repeat

background-attachment:
	scroll | fixed

background-position:
  [<percentage> | <length>]{1,2} | 
  [top | center | bottom] || 
  [left | center | right]

background:
  <background-color> ||
  <background-image> ||
  <background-repeat>  || 
  <background-attachment> || 
  <background-position>

BOX: Border ________________________

border-top-width:
border-top-right:
border-top-bottom:
border-top-left:
  <length> | <percentage> | auto

border-width:
  [ <length> | <percentage> | auto ]   
  [ <length> | <percentage> | auto ]   
  [ <length> | <percentage> | auto ]   
  [ <length> | <percentage> | auto ]   

border-style:
  none | solid | double | groove | 
  ridge | inset | outset | dotted | 
  dashed

border-color:
  <color>

BOX: Margins and Padding _____________

margin-top:
margin-right:
margin-bottom:
margin-left:
  <length> | <percentage> | auto

margin:
  [ <length> | <percentage> | auto ]   
  [ <length> | <percentage> | auto ]    
  [ <length> | <percentage> | auto ]    
  [ <length> | <percentage> | auto ] 

padding-top:
padding-right:
padding-bottom:
padding-left:
  <length> | <percentage>
padding:
  [ <length> | <percentage>]   
  [ <length> | <percentage>]    
  [ <length> | <percentage>]    
  [ <length> | <percentage>] 


SIZE _______________________________

width:
  <length> | <percentage> | auto

height:
  <length> | auto


WRAP _______________________________

float:
  left | right | none

clear:
  left | right | both


LIST PROPERTIES _____________________

list-style-type:
  disc | circle | square | decimal |
  lower-roman | upper-roman | 
  lower-alpha | upper-alpha |
  none

list-style-image:
  <url> | none

list-style-position:
  inside | outside

list-style:
  <keyword> || <position> || <url>

MISCELLANEOUS _____________________

display:
  block | inline | list-item | none

white-space:
  normal | pre | nowrap

Part of the PageSpinner CSS Examples
Style Sheet Examples Index

© 2000 Optima System.